import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    theme: '',
    language: localStorage.getItem('language') || 'zh'
  },
  mutations: {
    // 设置语言
    setLanguage(state, value) {
      state.language = value;
      localStorage.setItem('language', value);
    },
    // 设置主题
    setTheme(state, theme) {
      state.theme = theme;
      localStorage.setItem('theme', theme);
      let root = document.querySelector(':root');
      root.style.setProperty('--color-primary', theme);
      root.style.setProperty('--hover-primary', theme + '4d');
    },
    // 设置渐变主题
    setLinearGradientTheme(state, theme) {
      let themeColor = theme.toLocaleLowerCase();
      let linearGradientTheme = '';
      switch (themeColor) {
        // 蓝
        case '#3378ff':
          linearGradientTheme = {
            gradientDeg: '90.08deg',
            gradientFirstColorOpacity: '#179EFF 2.85%',
            gradientSecondColorOpacity: '#4E54C8 97.4%'
          };
          break;
        // 绿
        case '#12b9b8':
          linearGradientTheme = {
            gradientDeg: '90.05deg',
            gradientFirstColorOpacity: '#06BEB6 2.67%',
            gradientSecondColorOpacity: '#31AEBE 95.88%'
          };
          break;
        // 紫
        case '#9b39ee':
          linearGradientTheme = {
            gradientDeg: '90.08deg',
            gradientFirstColorOpacity: '#A53CF8 2.85%',
            gradientSecondColorOpacity: '#6B2CBB 97.4%'
          };
          break;
      }

      let root = document.querySelector(':root');
      root.style.setProperty('--gradient-deg', linearGradientTheme.gradientDeg);
      root.style.setProperty('--gradient-first-color-opacity', linearGradientTheme.gradientFirstColorOpacity);
      root.style.setProperty('--gradient-second-color-opacity', linearGradientTheme.gradientSecondColorOpacity);
    }
  },
  actions: {
    // 切换主题
    changeTheme({ commit, state }, theme) {
      commit('setTheme', theme);
      commit('setLinearGradientTheme', theme);
    }
  },
  modules: {}
});
